
<template>
<div class=" flex w-2/4 h-screen m-auto flex-col">
  <div class="w-full flex-col border border-gray-950/35 shadow-2xl border-b-4">
     <div class="h-1/4  flex flex-col items-center justify-center">
       <el-avatar :src="userInfo.head_pic" size="large"></el-avatar>
       <div class="mt-5 text-3xl">{{userInfo.userNickName}}</div>
     </div>
     <div class="text-2xl  text-wrap  flex" style="white-space: normal; word-wrap: break-word; word-break: break-all">
       {{cardMessage.contextTitle}}
     </div>
    <div class="  flex items-center justify-center">
      <img :src="cardMessage.contentResource" v-if="cardMessage.category=='图片'">
       <audio controls :src="cardMessage.contentResource" v-if="cardMessage.category=='音频'" ></audio>
      <video :src="cardMessage.contentResource" controls v-if="cardMessage.category=='视频'"></video>
    </div>
<div class="mb-5">点赞数：{{cardMessage.encourageCount}}</div>
  </div>
  <div class="w-full  grow flex-col  border shadow-2xl">
      <div class="w-full bg-gray-500/45 h-10  text-3xl text-center text-white">评论区</div>
    <div class="grow h-3/4 overflow-auto">
      <div v-for="(item,index) in commentList2" :key="index" class="border-b border-gray-950/15 h-1/6 text-white text-2xl">{{item.content}}
        <div class="text-right text-xl text-black">{{item.user.userNickName}}</div></div>
    </div>
    <div class=" h-1/4 flex flex-col">
      <div class="flex bg-gray-500/45">
      <input type="text" class="h-10 w-3/4" v-model="content">
       <div class="w-1/4 bg-gray-500/50 text-center hover:cursor-pointer hover:brightness-150" @click="commitComment">点击发送</div>
      </div>

    </div>

  </div>

<!--  <div>评论区</div>-->
<!--  <div>-->
<!--    <el-form>-->
<!--      <el-form-item>-->
<!--        <el-input placeholder="输入你的评论" v-model="content"></el-input>-->
<!--        <el-button @click="commitComment">发送</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </div>-->
<!--  <hr>-->
<!--  <h1 v-for="(item,index) in commentList2" :key="index" class="text-red-600">{{item.content}} 发布人：{{item.user.userNickName}}</h1>-->
<!--  <hr>-->
<!-- -->

</div>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "App",
  components: {},
  data(){
    return {
      cardId:-1,
      cardMessage:{},
      commentList:[],
      userId:-1,
      content:"",
      userInfo:{}
    }
  },
  methods:{
    commitComment(){
      const token = localStorage.getItem("token");
    axios.post("http://113.44.66.99:8080/getUserMessage",{},{
      headers: {
        Authorization: token
      }
    }).then(res=>{
      this.userId = res.data.data.userId;
      console.log(this.userId,"用户id获取");
      const formData = {
        userId:this.userId,
        cardId:this.cardId,
        content:this.content
      }
      axios.post("http://113.44.66.99:8080/addComment",formData).then(res=>{
        console.log(res);
        this.content=""
        ElMessage({
          type:"success",
          message:"发送成功",
        })
        axios.get(`http://113.44.66.99:8080/getComment?cardId=${this.cardId}`,{}).then(res => {
          console.log(res.data.data);
          this.commentList=res.data.data;
        })
      })

    })


    }
  },
  computed:{
    commentList2(){
      return this.commentList;
    }
  },
  created() {
    const urlSearchParams=new URLSearchParams(window.location.search);
    console.log(urlSearchParams.get('CardId'));
    const id=urlSearchParams.get("CardId");
    this.cardId = id;

  },
  mounted() {
    const token = localStorage.getItem("token");
    console.log("token",token);
    axios.get(`http://113.44.66.99:8080/getCardInfo?cardId=${this.cardId}`,{
      headers: {
        Authorization: token
      }
    }).then(res => {
     this.cardMessage=res.data.data;
     console.log(this.cardMessage,"卡片信息");
      axios.get(`http://113.44.66.99:8080/getUserById?userId=${this.cardMessage.userId}`,{
    }).then(res=>{

      this.userInfo=res.data.data;
    })
    })
    axios.get(`http://113.44.66.99:8080/getComment?cardId=${this.cardId}`,{}).then(res => {
      console.log(res.data.data);
      this.commentList=res.data.data;
    })
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
body {



  background: linear-gradient(-45deg, #00ffde, #ACC3F4,#faaca8,#9F81FF);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

</style>